<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025 智能点名系统</title>
    <style>
        :root {
            --neon-blue: #6e8efb;
            --hologram-pink: #ff61d6;
        }

        body {
            /* background: radial-gradient(circle at 50% 100%, rgba(110, 142, 251, 0.2) 0%, rgba(167, 119, 227, 0.4) 100%); */
            background: black;
            font-family: 'Orbitron', sans-serif;
            color: white;
            text-align: center;
        }

        .cyber-board {
            width: 90%;
            margin: 2rem auto;
            padding: 2rem;
            backdrop-filter: blur(10px);
            border: 2px solid var(--neon-blue);
            box-shadow: 0 0 30px rgba(110, 142, 251, 0.3);
            border-radius: 10px;
        }

        .particle-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .student-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border: 1px solid var(--neon-blue);
            border-radius: 8px;
            transition: transform 0.3s, background 0.3s;
        }

        .student-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(110, 142, 251, 0.3);
        }

        .highlight {
            background: rgba(255, 97, 214, 0.5) !important;
            transform: scale(1.1);
        }

        .glow-button {
            background: linear-gradient(135deg, var(--neon-blue), var(--hologram-pink));
            padding: 1rem 2rem;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            transition: 0.3s;
        }

        .glow-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px var(--hologram-pink);
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
    <div class="cyber-board">
        <!-- <h2>🎓 2025 智能点名系统</h2> -->
        <div class="particle-grid" id="studentGrid"></div>
        <div class="control-panel">
            <input type="number" id="pointsInput" placeholder="📈 积分调整值" style="padding: 0.5rem; width: 150px;">
            <button class="glow-button" onclick="startLottery()">🎲 量子点名</button>
            <button class="glow-button" onclick="updatePoints()">✨ 同步积分</button>
        </div>
    </div>
    <script>
        let students = [
            { "学号": "2313030110", "姓名": "谭都都", "积分": 0 },
            { "学号": "2313030133", "姓名": "卢云龙", "积分": 1 },
            { "学号": "2313030119", "姓名": "黄萍", "积分": 0 },
            { "学号": "2313030131", "姓名": "张佳怡", "积分": 4 },
            { "学号": "2313030123", "姓名": "汪灵蕊", "积分": 0 },
            { "学号": "2313030111", "姓名": "李佳琪", "积分": 3 },
            { "学号": "2313030115", "姓名": "柯友南", "积分": 4 },
            { "学号": "2313030126", "姓名": "丁嘉伟", "积分": 3 },
            { "学号": "2313030116", "姓名": "高赢", "积分": 0 },
            { "学号": "2313030128", "姓名": "喻文龙", "积分": 1 },
            { "学号": "2313030127", "姓名": "王思杰", "积分": 0 },
            { "学号": "2313030125", "姓名": "吴一凡", "积分": 1.5 },
            { "学号": "2313030101", "姓名": "娄梓瑜", "积分": 0.5 },
            { "学号": "2313030105", "姓名": "吴阳", "积分": 0.5 },
            { "学号": "2313030122", "姓名": "王超群", "积分": 4 },
            { "学号": "2313030112", "姓名": "操凯灵", "积分": 1 },
            { "学号": "2313030104", "姓名": "杨丹", "积分": 0 },
            { "学号": "2313030108", "姓名": "胡娜", "积分": 0 },
        ]


        function renderParticleGrid() {
            const grid = document.getElementById('studentGrid');
            grid.innerHTML = students.map(student => `
                <div class="student-card" data-id="${student.学号}">
                    <h3>${student.姓名}</h3>
                    <p>🪙 ${student.积分}pt</p>
                </div>
            `).join('');
        }

        function startLottery() {
            const cards = document.querySelectorAll('.student-card');
            cards.forEach(card => card.classList.remove('highlight'));

            setTimeout(() => {
                let winnerIndex = Math.floor(Math.random() * students.length);
                cards[winnerIndex].classList.add('highlight');
            }, 1);
        }

        function updatePoints() {
            const points = parseInt(document.getElementById('pointsInput').value);
            const selected = document.querySelector('.student-card.highlight');
            if (selected && !isNaN(points)) {
                const studentId = selected.dataset.id;
                let student = students.find(s => s.学号 === studentId);
                student.积分 += points;
                renderParticleGrid();
                document.querySelector(`[data-id="${studentId}"]`).classList.add('highlight');
            }
        }

        renderParticleGrid();
    </script>
</body>

</html>